<template>
	<view class="template-login">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>

		<view class="login">
			<!-- 顶部背景图片-->
			<view class="login__bg login__bg--top">
				<image class="bg" src="https://resource.tuniaokj.com/images/login/2/login-top2.png" mode="widthFix">
				</image>
			</view>

			<view class="login__wrapper">
				<view class="tn-margin-left tn-margin-right tn-text-bold" style="font-size: 60rpx;">
					欢迎回来
				</view>

				<!-- 登录/注册切换 -->
				<view
					class="login-sussuspension login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center"
					v-if="card==0">
					<view class="login__mode__item tn-flex-1"
						:class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
						登录
					</view>
					<view class="login__mode__item tn-flex-1"
						:class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
						注册
					</view>
					<view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
				</view>

				<!-- 输入框内容-->
				<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
					<!-- 登录 -->
					<block v-if="currentModeIndex === 0">
						<view
							class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
							<view class="login__info__item__input__left-icon">
								<view class="tn-icon-phone"></view>
							</view>
							<view class="login__info__item__input__content">
								<input maxlength="20" v-model="phone" placeholder-class="input-placeholder"
									placeholder="请输入手机号/用户名" />
							</view>
						</view>
						<view
							class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"
							v-if="currentTitle==1">
							<view class="login__info__item__input__left-icon">
								<view class="tn-icon-lock"></view>
							</view>
							<view class="login__info__item__input__content">
								<input maxlength="20" type="password" v-model="password" placeholder-class="input-placeholder"
									placeholder="请输入密码" />
							</view>
						</view>
						<view
							class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"
							v-if="currentTitle==0">
							<view class="login__info__item__input__left-icon">
								<view class="tn-icon-safe"></view>
							</view>
							<view
								class="login__info__item__input__content login__info__item__input__content--verify-code">
								<input placeholder-class="input-placeholder" v-model="code" placeholder="请输入验证码" />
							</view>
							<view class="login__info__item__input__right-verify-code"
								@tap.stop="getCode('mobilelogin')">
								<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx"
									width="100%" shape="round">{{ tips }}</tn-button>
							</view>
						</view>
					</block>
					<!-- 注册 -->
					<block v-if="currentModeIndex === 1">
						<view
							class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
							<view class="login__info__item__input__left-icon">
								<view class="tn-icon-phone"></view>
							</view>
							<view class="login__info__item__input__content">
								<input maxlength="20" placeholder-class="input-placeholder" v-model="phone"
									placeholder="请输入注册手机号码/用户名" />
							</view>
						</view>
						<view
							class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left" v-if="!invite_codes">
							<view class="login__info__item__input__left-icon">
								<view class="tn-icon-my-add"></view>
							</view>
							<view class="login__info__item__input__content">
								<input maxlength="20" placeholder-class="input-placeholder" v-model="invite_code"
									placeholder="请输入邀请人" />
							</view>
						</view>
						<view
							class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
							<view class="login__info__item__input__left-icon">
								<view class="tn-icon-safe"></view>
							</view>
							<view
								class="login__info__item__input__content login__info__item__input__content--verify-code">
								<input placeholder-class="input-placeholder" v-model="code" placeholder="请输入验证码" />
							</view>
							<view class="login__info__item__input__right-verify-code" v-if="card==0"
								@tap.stop="getCode('register')">
								<tn-button size="sm" padding="5rpx 10rpx" width="100%"
									shape="round">{{ tips }}</tn-button>
							</view>
							<view class="login__info__item__input__right-verify-code" v-if="card==1"
								@tap.stop="getCode('resetpwd')">
								<tn-button size="sm" padding="5rpx 10rpx" width="100%"
									shape="round">{{ tips }}</tn-button>
							</view>



						</view>

						<view
							class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
							<view class="login__info__item__input__left-icon">
								<view class="tn-icon-lock"></view>
							</view>
							<view class="login__info__item__input__content">
								<input :password="!showPassword" placeholder-class="input-placeholder"
									v-model="password" placeholder="请输入登录密码" />
							</view>
							<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
								<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
							</view>
						</view>

					</block>
					<view class="" style="display: flex;width: 100%;margin-top: 30rpx;">
						<image src="https://oss.taoding1688.com/static/uniapp/static/commission/radio.png"
							mode="widthFix" style="width: 35rpx;margin: 0 10rpx;" v-if="!showAbout" @click="showAbout=true"></image>
						<image src="https://oss.taoding1688.com/static/uniapp/static/commission/radiob.png"
							mode="widthFix" style="width: 35rpx;margin: 0 10rpx;" v-else @click="showAbout=false"></image>
						<view class="" style="font-size: 28rpx;"> 我已阅读并遵守
							<text @click="attrs(1)" style="color: #e9b461;">《用户协议》</text>
							与
							<text @click="attrs(2)" style="color: #e9b461;">《隐私协议》 </text>
						</view>
					</view>
					<view class="login__info__item__button tn-bg-blue tn-color-white" hover-class="tn-hover"
						:hover-stay-time="150" @click="login(2)" v-if="card==1">修改密码</view>
					<view class="login__info__item__button tn-bg-blue tn-color-white" hover-class="tn-hover" v-else
						:hover-stay-time="150" @click="login(currentModeIndex)">
						{{ currentModeIndex === 0 ? '登录' : '注册'}}
					</view>
					<view :class="[{'login__info__item__tips': currentModeIndex === 1}]" v-if="card==0">
						<view class="tn-flex tn-flex-row-between tn-padding">
							<view class="tn-padding-left tn-color-gray" @tap.stop="reset">忘记密码</view>
							<view class="tn-padding-left tn-color-gray" @tap.stop="quickLogin">快捷登录</view>
						</view>
					</view>
					<view :class="[{'login__info__item__tips': currentModeIndex === 1}]" v-if="card==1">
						<view class="tn-flex tn-flex-row-between tn-padding">

							<view class="tn-padding-left tn-color-gray" @tap.stop="goToLogin">前往登录</view>
						</view>
					</view>
				</view>
				<!-- 其他登录方式 -->
				<!-- 	<view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
					<view class="tn-padding-sm tn-margin-xs">
						<view
							class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-teal--dark">
							<view class="tn-icon-wechat-fill"></view>
						</view>
					</view>
					<view class="tn-padding-sm tn-margin-xs">
						<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-red">
							<view class="tn-icon-sina"></view>
						</view>
					</view>
					<view class="tn-padding-sm tn-margin-xs">
						<view
							class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-blue">
							<view class="tn-icon-qq"></view>
						</view>
					</view>
				</view> -->
			</view>

			<!-- 底部背景图片-->
			<view class="login__bg login__bg--bottom">
				<image src="https://resource.tuniaokj.com/images/login/2/login-bottom2.png" mode="widthFix"></image>
			</view>

		</view>

		<!-- 验证码倒计时 -->
		<tn-verification-code ref="code" uniqueKey="login-demo-4" :seconds="60" @change="codeChange">
		</tn-verification-code>
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import {
		postShopSend,
		postShopSmsRegister,
		postAccountLogin,
		postSmsLogin,
		postResetPassword,
		getInit,
		getThirdWechatLogin,
		getUserProfile
	} from '@/apis/index.js'



	import {
		wechatLogin
	} from "@/util/wechat"



	export default {
		name: 'login-demo-4',
		mixins: [template_page_mixin],
		data() {
			return {
				invite_codes:'',
				showAbout:false,
				title: "账号密码登录",
				titleC: '验证码登录',
				currentTitle: 1,
				// 当前选中的模式
				currentModeIndex: 0,
				// 模式选中滑块
				modeSliderStyle: {
					left: 0
				},
				// 是否显示密码
				showPassword: false,
				// 倒计时提示文字
				tips: '获取验证码',
				card: 0,
				phone: "", //手机号
				password: "",
				code: "",
				invite_code: ""
			}
		},
		watch: {
			currentModeIndex(value) {
				const sliderWidth = uni.upx2px(476 / 2)
				this.modeSliderStyle.left = `${sliderWidth * value}px`
			}
		},
		onShow() {
			let invite_code=uni.getStorageSync('invite_code')
			console.log(invite_code)
			if (invite_code) {
				this.invite_code=invite_code
				this.invite_codes=invite_code
			}
		},
		onLoad() {

		},
		methods: {
			getUserInfo() {
				getUserProfile().then(res => {
					this && this.$tn.vuex('userInfos', res.data)
				})
			},
			attrs(index){
				if (index==1) {
					uni.navigateTo({
						url:'/templatePage/userAgreement/userAgreement'
					})
					return
				}
				
				if (index==2) {
					uni.navigateTo({
						url:'/templatePage/richtext/richtext'
					})
					return
				}
			},
			async quickLogin() {

				try {
					const id = await wechatLogin();
					const res = await getThirdWechatLogin({
						platform: 'miniProgram',
						shareInfo: {},
						payload: encodeURIComponent(
							JSON.stringify({
								sessionId: id,
							}),
						),
					})
					uni.reLaunch({
						url: '/pages/tuniao/tuniao'
					})
				} catch (error) {
					console.error(error);
				}







			},
			async login(index) {
				if (!this.showAbout) {
					uni.showToast({
						title:'请勾选同意',
						icon:'none'
					})
					return
				}

				// 0  登录
				if (index == 0) {
					if (!this.phone) {
						this.$tn.message.toast('请输入手机号')
						return
					}
					//账户验证码
					if (this.currentTitle == 0) {
						if (!this.code) {
							this.$tn.message.toast('请输入验证码')
							return
						}
						this.postSmsLogins()
						return
					}
					//账号密码
					if (this.currentTitle == 1) {
						if (!this.password) {
							this.$tn.message.toast('请输入密码')
							return
						}
						this.loginRe()
						return
					}



					return
				}
				// 1 注册  
				if (index == 1) {
					if (!this.phone) {
						this.$tn.message.toast('请输入手机号')
						return
					}
					if (!this.code) {
						this.$tn.message.toast('请输入验证码')
						return
					}
					if (!this.password) {
						this.$tn.message.toast('请输入密码')
						return
					}
					this.register()
					return
				}
				// 2 修改
				if (index == 2) {
					this.getResetPassword()
					return
				}

			},
			goToIndex() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			//忘记密码
			async getResetPassword() {

				let res = await postResetPassword({
					code: this.code,
					mobile: this.phone,
					password: this.password,
				})
				this.$tn.message.toast(res.msg)
			},
			//注册
			async register() {
				let res = await postShopSmsRegister({
					code: this.code,
					mobile: this.phone,
					password: this.password,
					invite_code: this.invite_code,
					shareInfo: uni.getStorageSync('shareLog') || {}
				})
				if (res.code==1) {
					this.getUserInfo()
					this.goToIndex()
				}
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
			},
			//登录
			async loginRe() {
				let res = await postAccountLogin({
					account: this.phone,
					password: this.password,
				})
				if (res.code==1) {
					console.log(1)
					this.getUserInfo()
					this.goToIndex()
					
				}
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
				this.$tn.message.toast(res.msg)
			
			},
			//验证码登录
			async postSmsLogins() {
				let res = await postSmsLogin({
					code: this.code,
					mobile: this.phone,
				})
				this.$tn.message.toast(res.msg)
				console.log(2)
				this.goToIndex()
			},
			//验证码
			sendCode(text, phone) {
				postShopSend({
					event: text,
					mobile: phone
				}).then(res => {
					if (res.code == 200) {
						this.$refs.code.start()


						this.$tn.message.toast(res.msg)
					} else {
						this.$tn.message.toast(res.msg)
					}
				}).catch(err => {
					this.$tn.message.toast('请稍后再试')
				});
			},
			//忘记密码按钮、
			goToLogin() {
				this.currentModeIndex = 0
				this.card = 0
			},
			reset() {
				this.card = 1
				this.currentModeIndex = 1
			},
			loginSwitch(index) {
				if (index == 0) {
					this.currentTitle = 1
				} else {
					this.currentTitle = 0
				}
			},
			// 切换模式
			modeSwitch(index) {
				this.currentModeIndex = index
				this.showPassword = false
			},
			// 获取验证码
			getCode(text) {
				if (this.phone) {
					if (this.$refs.code.canGetCode) {
						this.$tn.message.loading('正在获取验证码')
						this.sendCode(text, this.phone)
						// setTimeout(() => {
						// 	this.$tn.message.closeLoading()
						// 	// this.$tn.message.toast('验证码已经发送')
						// 	// 通知组件开始计时
						// 	this.$refs.code.start()
						// }, 2000)
					} else {
						this.$tn.message.toast(this.$refs.code.secNum + '秒后再重试')
					}
				} else {
					this.$tn.message.toast('请输入手机号')
					return
				}

			},
			// 获取验证码倒计时被修改
			codeChange(event) {
				this.tips = event
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/templatePage/custom_nav_bar.scss';
	/* 悬浮 */
	/* .login-sussuspension{
    animation: suspension 3s ease-in-out infinite;
  }
  
  @keyframes suspension {
    0%, 100% {
      transform: translate(0 , 0);
    }
    50% {
      transform: translate(0rem , 1rem);
    }
  } */

	.login {
		position: relative;
		height: 100%;
		z-index: 1;

		/* 背景图片 start */
		&__bg {
			z-index: -1;
			position: fixed;

			&--top {
				top: 0;
				left: 0;
				right: 0;
				width: 100%;

				.bg {
					width: 750rpx;
					will-change: transform;
				}
			}

			&--bottom {
				bottom: -10rpx;
				left: 0;
				right: 0;
				width: 100%;
				// height: 144px;
				margin-bottom: env(safe-area-inset-bottom);

				image {
					width: 750rpx;
					will-change: transform;
				}
			}
		}

		/* 背景图片 end */

		/* 内容 start */
		&__wrapper {
			margin-top: 200rpx;
			width: 100%;
		}

		/* 切换 start */
		&__mode {
			position: relative;
			margin: 0 auto;
			width: 476rpx;
			height: 77rpx;
			margin-top: 100rpx;
			background-color: rgba(255, 255, 255, 0.6);
			box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
			border-radius: 39rpx;

			&__item {
				height: 77rpx;
				width: 100%;
				line-height: 77rpx;
				text-align: center;
				font-size: 31rpx;
				color: #080808;
				letter-spacing: 1em;
				text-indent: 1em;
				z-index: 2;
				transition: all 0.4s;

				&--active {
					font-weight: bold;
					color: #FFFFFF;
				}
			}

			&__slider {
				position: absolute;
				height: inherit;
				width: calc(476rpx / 2);
				border-radius: inherit;
				box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
				z-index: 1;
				transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
			}
		}

		/* 切换 end */

		/* 登录注册信息 start */
		&__info {
			margin: 80rpx 30rpx 10rpx 30rpx;
			padding-bottom: 0;
			border-radius: 20rpx;

			&__item {

				&__input {
					margin-top: 59rpx;
					width: 100%;
					height: 77rpx;
					border: 1rpx solid #E6E6E6;
					border-radius: 39rpx;

					&__left-icon {
						width: 10%;
						font-size: 44rpx;
						margin-left: 20rpx;
						color: #838383;
					}

					&__content {
						width: 80%;
						padding-left: 10rpx;

						&--verify-code {
							width: 56%;
						}

						input {
							font-size: 24rpx;
							// letter-spacing: 0.1em;
						}
					}

					&__right-icon {
						width: 10%;
						font-size: 44rpx;
						margin-right: 20rpx;
						color: #838383;
					}

					&__right-verify-code {
						width: 34%;
						margin-right: 20rpx;
					}
				}

				&__button {
					margin-top: 75rpx;
					margin-bottom: 39rpx;
					width: 100%;
					height: 77rpx;
					text-align: center;
					font-size: 31rpx;
					font-weight: bold;
					line-height: 77rpx;
					letter-spacing: 1em;
					text-indent: 1em;
					border-radius: 39rpx;
					box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
				}

				&__tips {
					margin: 30rpx 0;
					color: #AAAAAA;
				}
			}
		}

		/* 登录注册信息 end */

		/* 登录方式切换 start */
		&__way {
			margin: 0 auto;
			margin-top: 110rpx;

			&__item {
				&--icon {
					width: 85rpx;
					height: 85rpx;
					font-size: 80rpx;
					// border-radius: 100rpx;
					margin-bottom: 18rpx;
					position: relative;
					z-index: 1;

					// &::after {
					//   content: " ";
					//   position: absolute;
					//   z-index: -1;
					//   width: 100%;
					//   height: 100%;
					//   left: 0;
					//   bottom: 0;
					//   border-radius: inherit;
					//   opacity: 1;
					//   transform: scale(1, 1);
					//   background-size: 100% 100%;
					//   background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
					// }
				}
			}
		}

		/* 登录方式切换 end */
		/* 内容 end */

	}

	/deep/.input-placeholder {
		font-size: 24rpx;
		color: #838383;
	}
</style>